<template>
	<view class="mineBox">
		<view class="topBox">
			<image src="../../static/images/mineTopBg.png" class="topBg"></image>
			<view class="navBox">
				<u-navbar title="我的" bgColor="transparent" :titleStyle="{fontWeight:'900',color:'#ffffff'}">
					<view class="u-nav-slot" slot="left"></view>
				</u-navbar>
			</view>
		</view>
		<view class="userBox" :style="'top:'+(20+(customBarHeight*2))+'rpx;'" v-if="!userInfo.avatar">
			<view class="avatar">
				<image src="../../static/images/default_avatar.png" class="image"></image>
			</view>
			<view class="nickName" @click="userLogin">请登录</view>
		</view>
		<view class="userBox" :style="'top:'+(20+(customBarHeight*2))+'rpx;'" v-else>
			<view class="avatar">
				<image :src="userInfo.avatar" class="image"></image>
			</view>
			<view class="nickName">{{userInfo.nickname}}</view>
		</view>
		<view class="optionsBox" :style="'top:'+(60+(customBarHeight*2))+'rpx;'">
			<image src="../../static/images/mine_options.png" class="topBg"></image>
			<view class="optionsList">
				<view class="optionsItem" @click="navigatorPage('/pages/watchRecord/watchRecord')">
					<image src="../../static/images/record.png" class="icon"></image>
					<view class="label">观看记录</view>
				</view>
				<view class="optionsItem" @click="navigatorPage('/pages/scanRecord/scanRecord')"
					v-if="userInfo.type==2">
					<image src="../../static/images/scan.png" class="icon"></image>
					<view class="label">扫码记录</view>
				</view>
				<view class="optionsItem" @click="navigatorPage('/pages/account/account')">
					<image src="../../static/images/account.png" class="icon"></image>
					<view class="label">老师账户</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		data() {
			return {
				customBarHeight: Number(44 + app.globalData.statusBar),
			}
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin'])
		},
		methods: {
			onLoadMethod() {

			},
			onHideMethod() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			userLogin() {
				this.$emit('userLogin')
			},
			navigatorPage(page) {
				if (!this.isLogin) {
					return this.$emit('userLogin')
				} else {
					this.$Tips(page)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.mineBox {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.topBox {
		height: 544rpx;
		width: 100%;
		position: fixed;
		top: 0;

		.topBg {
			position: absolute;
			width: 100%;
		}

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.userBox {
		position: relative;
		padding: 0 34rpx;
		top: 160rpx;
		display: flex;
		align-items: center;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 2px solid #ffffff;
			overflow: hidden;

			.image {
				width: 100%;
				height: 100%;
			}
		}

		.nickName {
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 22rpx;
		}
	}

	.optionsBox {
		position: relative;
		top: 200rpx;
		height: 274rpx;
		margin: 0 34rpx;
		display: flex;
		align-items: center;

		.topBg {
			position: absolute;
			width: 100%;
			height: 274rpx;
		}

		.optionsList {
			padding: 0 48rpx;
			position: relative;
			display: flex;

			.optionsItem {
				box-sizing: border-box;
				width: 180rpx;
				height: 172rpx;
				padding: 24rpx;
				background: #FFFCF8;
				border-radius: 24rpx;
				margin-right: 26rpx;

				.icon {
					width: 52rpx;
					height: 52rpx;
				}

				.label {
					font-size: 24rpx;
					color: #222222;
					margin-top: 28rpx;
				}
			}
		}
	}
</style>